<!--订单详细信息页  ————————  客户经理可查看-->
<template>
  <div id="CustomerHistoricalOrderDetails">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>订单详细信息</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">订单详细信息</span>
        </div>

        <div style="margin-bottom: 20px">
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>

          <el-descriptions class="margin-top" title="订单详情" :column="2" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                客户编号
              </template>
                {{this.customerId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户名称
              </template>
                {{this.customerName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                订单编号
              </template>
                {{this.order.orderId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                结束时间
              </template>
                {{this.order.orderUpdateTime}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                送货地址
              </template>
                {{this.order.customerAddress}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总金额（元）
              </template>
              {{this.totalAmount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
                {{this.order.orderState}}
            </el-descriptions-item>
          </el-descriptions>

        </div>

        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>系列</th>
            <th>型号</th>
            <th>类型</th>
            <th>单价</th>
            <th>数量</th>
            <th>价格</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in commodities">
            <th>{{index+1}}</th>
            <td>{{item.productSeries}}</td>
            <td>{{item.productModel}}</td>
            <td>{{item.productType}}</td>
            <td>{{item.productPrices}}</td>
            <td>{{item.commodityNum}}</td>
            <td>{{item.productPrices*item.commodityNum}}</td>
          </tr>
          </tbody>
        </table>
        <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
          <button v-on:click="toCustomerHistoricalOrderList" class="btn btn-default">返回</button>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "CustomerHistoricalOrderDetails",
  data(){
    return{
      size:'',
      customerId:'',
      customerName:'',
      order:{},
      commodities:[],
      totalAmount:0,
    }
  },
  methods:{
    loadCustomerIdAndName(){
      this.customerId=this.$route.query.customerId
      this.customerName=this.$route.query.customerName
    },
    toCustomerHistoricalOrderList(){
      this.$router.push({path:'/MemuBar/CustomerHistoricalOrderList',query:{
          customerId:this.customerId,customerName:this.customerName
        }})
    },
    loadOrder(){
      this.$axios.get('/order/getOrderByOrderIdAndCustomerId',{
        params:{
          customerId:this.customerId,
          orderId:this.$route.query.orderId
        }
      }).then(
        res=>{
          this.order=res.data.data

        }
      )
    },
    loadCommodities(){
      this.$axios.get('/commodity/loadCommoditiesByOrderId',{
        params:{
          orderId:this.$route.query.orderId
          }
      }).then(
        res=>{
          this.commodities=res.data.data
          for (let i = 0; i < this.commodities.length; i++) {
            this.totalAmount +=this.commodities[i].productPrices*this.commodities[i].commodityNum
          }
        }
      )
    }
  },
  created() {
    this.loadCustomerIdAndName()
    this.loadOrder()
    this.loadCommodities()
  }
}
</script>

<style scoped>

</style>
